<template>
  <div class="margin-Margin">
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <div slot="header">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="用户管理" name="first">
            <!-- 新增角色按钮 -->
            <el-row style="padding: 10px 0">
              <el-button
                icon="el-icon-plus"
                size="small"
                type="primary"
                @click.native="addFn()"
              >新增角色</el-button>
            </el-row>
            <!-- 表格 -->
            <el-table :data="rolelist">
              <el-table-column type="index" label="序号" width="120" />
              <el-table-column prop="name" label="角色名称" width="240" />
              <el-table-column prop="description" label="描述" />
              <el-table-column label="操作">
                <template #default="{row}">
                  <el-button size="small" type="success">分配权限</el-button>
                  <el-button size="small" type="primary" @click.native="addFn(row.id)">编辑</el-button>
                  <el-button size="small" type="danger" @click="delFn(row.id)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页组件 -->
            <el-row type="flex" justify="center" align="middle" style="height: 60px">
              <!-- 分页组件 -->
              <el-pagination
                layout="prev,pager,next"
                :total="total"
                :current-page="role.page"
                :page-size="role.pagesize"
                @current-change="changePage"
              />
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
    <employes :id="id" :show="show" @close="closeFn" />
  </div>

</template>

<script>
import employes from '@/views/employees/employes.vue'
import { jiaose, deljuese } from '@/api/setting'
export default {
  components: {
    employes
  },
  data() {
    return {
      // 显示弹窗层
      show: false,
      // 需要修改人的id
      id: null,
      activeName: 'first',
      rolelist: [],
      total: 0, // 总条数
      role: {
        page: 1, // 当前页码数
        pagesize: 2// 当前页面需要的数据条数
      }
    }
  },
  created() {
    this.onshuju()
  },
  methods: {
    // 删除
    async delFn(id) {
      await deljuese(id)
      // 2. 重新查询列表
      this.onshuju()
    },
    // 隐藏弹窗
    closeFn(success) {
      // 传来1 为需要重新互殴去数据  便表示已添加一条数据
      if (success) {
        this.onshuju()
      }
      this.show = false
    },
    // 新增角色/编辑
    addFn(id = '') {
      this.show = true
      this.id = id
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
    // 调用数据
    async onshuju() {
      const res = await jiaose(this.role)
      this.rolelist = res.rows
      this.total = res.total
      console.log('获取页码列表', res)
    },
    changePage(currPage) {
      this.role.page = currPage
      // 2. 重新查询列表
      this.onshuju()
    }
  }
}
</script>

<style lang='scss' scoped>

</style>
